<template>
  <div class="platform-col" :class="[colPosition, inner? '':'mb15']" :style="colStyle">
    <slot>
      <label class="platform-col-label" :style="labelStyle">
        <slot name="label" />
      </label>
      <div class="platform-col-content">
        <slot name="content" />
      </div>
    </slot>
  </div>
</template>
<script>
  const INIT_COL_WIDTH = '33.3%'
  export default {
    name:'SearchItem',
    componentName:'SearchItem',
    inject: ['Search'],
    props:{
      labelWidth: {
        default: "auto"
      },
      /**
       * number类型 对应px，固定宽度
       * string类型 自适应宽度 %
       */
      colWidth: {
        type: [Number,String],
        default: INIT_COL_WIDTH
      },
      inner: {
        type: Boolean,
        default: false
      },
      space: {
        type: Number,
        default: 10
      }
    },
    computed: {
      labelStyle() {
        if (this.Search.position=='horizontal') {
          return {
            'width': this.labelWidth || this.Search.labelWidth,
            'text-align': this.Search.labelPosition
          }
        }
        return null
      },
      colPosition() {
        return this.Search.position;
      },
      colStyle() {
        let width,mediaWidthCol
        if (this.mediaWidth !== null) {
          mediaWidthCol = this.mediaWidth
        }
        if (typeof this.colWidth === 'number') {
          width = this.colWidth + 'px'
        } else {
          if (!this.colWidth || (this.colWidth && this.colWidth.indexOf('%')) === -1) { // 进入此逻辑，说明父组件传了值，覆盖了默认的值，却传值不对
            if (mediaWidthCol) {
              width = mediaWidthCol
            } else {
              width = INIT_COL_WIDTH
            }
            console.warn(`SearchItem组件的col-width参数需要为string类型时，需传“%”,否则取默认值“${INIT_COL_WIDTH}”，不可预期`)
          } else {
            if (this.colWidth === INIT_COL_WIDTH) {//父组件未传值，则根据屏幕自适应
              width = mediaWidthCol
            } else { // 当次调用有特殊设置，认定想要有特殊展示，以传入值为结果
              width = this.colWidth
            }
          }
        }
        let gutter = this.space
        if (gutter === '')gutter=0

        return {
          'width': width,
          'padding-left': `${gutter}px`,
          'padding-right': `${gutter}px`
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .platform-col {
    display: inline-block;
    box-sizing: border-box;
    // width: 33.3%;
    vertical-align: middle;

    .platform-col-label {
      display: inline-block;
      font-size: 14px;
      box-sizing: border-box;
      height: 16px;
      // margin-bottom: 10px;
    }

    .platform-col-content {
      box-sizing: border-box;
      font-size: 13px;
    }

    &.horizontal {
      .platform-col-label {
        float: left;
        line-height: 32px;
        margin-right: 5px;
      }

      .platform-col-content {
        overflow: hidden;
      }
    }
  }

  // @media (min-width: 960px) and (max-width: 1360px) {
  //   .platform-col{
  //     width: 33.3%;
  //   }
  // }

  // @media (min-width: 1360px) and (max-width: 1760px) {
  //   .platform-col{
  //     width: 25%;
  //   }
  // }

  // @media (min-width: 1760px) {
  //   .platform-col{
  //     width: 20%;
  //   }
  // }
</style>
